// These mixins are from `src/sass/utils/_mixins.scss in the web app. They've been copied because rollup-plugin-sass
// that we use doesn't properly support @use.

@mixin button-small {
    height: 32px;
    padding: 0 16px;
    font-size: 12px;
    line-height: 10px;
}

@mixin tertiary-button {
    display: inline-flex;
    align-items: center;
    border: 0;
    border-radius: 4px;
    background: rgba(var(--button-bg-rgb), 0.08);
    color: var(--button-bg);
    font-weight: 600;
    transition: all 0.15s ease-out;

    &:disabled {
        background: rgba(var(--center-channel-color-rgb), 0.08);
        color: rgba(var(--center-channel-color-rgb), 0.32);
    }

    &:hover:enabled {
        background: rgba(var(--button-bg-rgb), 0.12);
    }

    &:active:enabled {
        background: rgba(var(--button-bg-rgb), 0.16);
    }

    i {
        display: flex;
        font-size: 18px;

        &:first-child::before {
            margin: 0 7px 0 0;
        }

        &:last-child::before {
            margin: 0 0 0 7px;
        }
    }
}

.footer-pagination {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;

    &__legend {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: flex-start;
        color: rgba(var(--center-channel-color-rgb), 0.75);
        font-size: 12px;
        font-weight: 600;
        line-height: 16px;
    }

    &__button-container {
        display: flex;
        align-items: center;
        justify-content: center;

        &__button {
            @include tertiary-button;
            @include button-small;

            &:not(:first-child) {
                margin-left: 8px;
            }

            > :not(:first-child) {
                margin-left: 5px;
            }
        }
    }
}
